<template>
  <a-form-model layout="inline" :model="searchFrom" @submit="handleSubmit" @submit.native.prevent>
    <a-form-model-item label="检索关键字">
      <a-input v-model="searchFrom.searchWord" placeholder="请输入关键字"> </a-input>
    </a-form-model-item>
    <a-form-model-item label="商品类目">
      <a-select
        show-search
        placeholder="请选择商品类目"
        style="width: 200px"
        @change="handleChange"
        allowClear
      >
        <a-select-option v-for="item in categoryList" :key="item.id" :value="item.id">
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item>
      <a-button type="primary" html-type="submit">
        检索
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  props: ['categoryList'],
  data() {
    return {
      searchFrom: {
        searchWord: '', // 检索产品的关键词
        category: '', // 检索产品的类目
      },
    };
  },
  methods: {
    // 点击提交时触发的函数
    handleSubmit() {
      this.$emit('submit', this.searchFrom);
    },
    // 切换类目时触发的函数
    handleChange(val) {
      this.searchFrom.category = val;
    },
  },
  created() {},
};
</script>
